<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" lang="zh">
<head>
    <th:block th:include="common/head::head"/>
    <link th:href="@{${session.jpomProxyPath}+'/static/ztree/zTreeStyle/zTreeStyle.css'}" rel="stylesheet">
    <style>


        .div-uploadfiles {
            display: none;
            width: 100%;
            margin: 10px 0;
        }

        .div-uploadfiles .layui-inline {
            width: calc(50% - 5px);
            margin-right: 0px;
        }

        .ztree {
            height: 80vh;
            overflow-x: auto;
            padding: 10px;
        }
    </style>
</head>

<body>
<div class="layui-row">
    <div class="layui-col-md3">
        <ul id="tree" class="ztree"></ul>
    </div>
    <div class="layui-col-md9">
        <div class="layui-row">

            <button id="uploadFile" class="layui-btn layui-btn-sm">
                <i class="layui-icon">&#xe67c;</i>上传文件
            </button>
            <div class="layui-layout-right" style="padding-right: 20px;padding-top: 10px;">
                <div>
                    当前路径:<span id="currentPath">[[${project}]]</span>
                </div>
            </div>
        </div>
        <table class="layui-table" id="tab_file" lay-filter="tab_file" style="margin: 0;"></table>
    </div>
</div>
</body>

<script type="text/html" id="bar_projects">

    <a th:if="${session.user.isSystemUser()}" href="javascript:;"
       class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</a>

    {{# if(!d.isDirectory){ }}
    <a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="download">下载</a>
    {{# } }}
</script>
<script type="text/javascript">
    var zTreeObj;
    const setting = {
        data: {
            key: {
                name: "filename",
                children: "children",
                isParent: "hasChildren",
                chkDisabled: 'chkDisabled'
            },
            view: {
                selectedMulti: false
            }
        },
        callback: {
            onClick: zTreeOnExpand,
            onExpand: zTreeOnExpand,
        }
    };

    const tableWhere = {
        id: '[[${id}]]',
        path: '[[${project}]]',
        except: 'dir'
    };

    var currentNode = {
        filename: "[[${project}]]".substring(1),
        index: -1,
        path: "[[${project}]]",
        isDirectory: true
    };

    function loadSuccess() {
        //
        asyncLoadJs("[[${session.jpomProxyPath}]]/static/ztree/jquery.ztree.core.min.js", function () {
            zTreeObj = $.fn.zTree.init($("#tree"), setting);
            zTreeObj.addNodes(null, currentNode, false);
            currentNode = zTreeObj.getNodeByTId("tree_1");

            loadingAjax({
                url: './getFileList',
                data: {
                    id: '[[${id}]]',
                    path: '[[${project}]]',
                    except: 'file'
                },
                success: function (data) {
                    var child = data.data;
                    if (child) {
                        zTreeObj.removeChildNodes(currentNode);
                        var temp = [];
                        for (var i in child) {
                            temp.push(child[i]);
                            if (child[i].isDirectory) {
                                child[i].hasChildren = true;
                                child[i].chkDisabled = true;
                            }
                        }
                        zTreeObj.addNodes(currentNode, temp, false);
                    }
                }
            });
        });

        tableRender({
            id: 'table_file',
            elem: '#tab_file',
            url: './getFileList',
            where: tableWhere,
            cols: [
                // {field: 'index', title: '编号', width: '10%'},
                {
                    field: 'filename', title: '文件名称', sort: true, width: '30%', templet: function (d) {
                        if (d.isDirectory) {
                            return d.filename + '【文件夹】';
                        }
                        return d.filename;
                    }
                },
                {field: 'modifyTime', title: '修改时间', sort: true, width: '20%'},
                {field: 'fileSize', title: '文件大小', sort: true, width: '15%'},
                {field: 'op', title: '操作', toolbar: '#bar_projects'}
            ]
        });

        //
        var updateFail = false;
        uploadRender({
            elem: '#uploadFile',
            accept: 'file',
            data: {
                id: '[[${id}]]',
                path: currentNode.path
            },
            multiple: true,
            url: './upload',
            choose: function (obj) {
            },
            before: function (obj) {
                this.data.path = currentNode.path;
                updateFail = false;
            },
            allDone: function (obj) {
                if (updateFail) {
                    return;
                }
                layer.msg("文件总数：" + obj.total + "上传失败：" + obj.aborted);
                setTimeout(function () {
                    reloadTable();
                }, 2000);
            },
            done: function (res, index, upload) {
                if (res.code !== 200) {
                    layer.msg(res.msg);
                }
                // 没有权限
                if (res.code === 302) {
                    updateFail = true;
                }
            }
        });

        // 表格工具条事件
        table.on('tool(tab_file)', function (obj) {
            var data = obj.data;
            var event = obj.event;
            if ('delete' === event) {
                // 删除文件
                deleteFile(data);
            } else if ('download' === event) {
                // 下载文件
                downloadFile(data);
            }
        });
    }

    //节点展开
    function zTreeOnExpand(event, treeId, treeNode) {

        if (treeNode.isDirectory) {
            currentNode = treeNode;
            var filePath = (treeNode.parentPath || '') + "/" + treeNode.filename;
            currentNode.path = tableWhere.path = filePath;
            $('#currentPath').text(filePath);
            reloadTable();
        }
    }

    function reloadTable() {
        layer.load(1, {
            shade: [0.5, '#fff']
        });
        // 刷新项目列表
        table.reload('table_file', {
            url: './getFileList',
            where: tableWhere,
            done: function (data) {
                layer.closeAll();
                var child = data.data;
                if (child) {
                    zTreeObj.removeChildNodes(currentNode);
                    var temp = [];
                    for (var i in child) {
                        temp.push(child[i]);
                        if (child[i].isDirectory) {
                            child[i].hasChildren = true;
                            child[i].chkDisabled = true;
                        }
                    }
                    zTreeObj.addNodes(currentNode, temp, false);
                }
            }
        });
    }

    //下载文件
    function downloadFile(data) {
        var url = "./download?id=[[${id}]]&filename=" + encodeURI(data.filename) + "&path=" + data.parentPath;
        url = appendNodeId(url);
        self.location.href = url;
    }

    // 删除文件
    function deleteFile(data) {
        var msg;
        if (data.isDirectory) {
            msg = '确定删除文件夹 ' + data.filename + '？'
        } else {
            msg = '确定删除文件 ' + data.filename + '？'
        }
        layer.confirm(msg, {
            title: '系统提示'
        }, function (index) {
            layer.close(index);
            loadingAjax({
                url: './deleteFile',
                data: {
                    id: '[[${id}]]',
                    filename: data.filename,
                    path: data.parentPath
                },
                success: function (data) {
                    layer.msg(data.msg);
                    if (200 === data.code) {
                        reloadTable();
                    }
                }
            });
        });
    }
</script>
</html>